<template>
  <!--    项目基础信息-->
  <el-form ref="info" v-model="info" label-width="100px">
    <!-- 执行单位部门 -->
    <el-row>

      <el-col :span="6">
        <slot name="test1"></slot>
      </el-col>

      <el-col :span="6">
        <el-form-item label="项目编号">
          <el-input v-model="info.batch_id" placeholder="项目编号" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="执行公司">
          <el-input v-model="info.company" placeholder="项目待分配" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 创建人联系方式 -->
    <el-row>

      <el-col :span="6">
        <el-form-item label="客户名称">
          <el-input v-model="info.partner_id" placeholder="客户名称" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="项目负责">
          <el-input v-model="info.leader" placeholder="项目负责" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="项目电话">
          <el-input v-model="info.leader_mobile" placeholder="项目电话" maxlength="11" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!--    客户负责人-->

    <el-row>
      <!-- 部门 -->
      <el-col :span="6">
        <el-form-item label="执行部门">
          <el-input v-model="info.dept" placeholder="项目待分配" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户对接">
          <el-input v-model="info.customer" placeholder="客户对接" :disabled="isdisabled"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户电话">
          <el-input v-model="info.customer_mobile" placeholder="客户电话" maxlength="11"
                    :disabled="isdisabled"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!--    销售经理,销售电话-->
    <el-row>
      <!--项目城市-->
      <el-col :span="6">
        <el-form-item label="项目城市" prop="city">
          <el-input v-model="info.city" placeholder="项目城市" :disabled="isdisabled"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="销售经理">
          <el-input v-model="info.seller" placeholder="负责人" :disabled="isdisabled"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="销售电话">
          <el-input v-model="info.seller_mobile" placeholder="销售电话" maxlength="11"
                    :disabled="isdisabled"></el-input>
        </el-form-item>
      </el-col>



    </el-row>


    <!-- 开始时间 结束时间 -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="立项时间">
          <el-input v-model="info.created_at" placeholder="项目待分配" disabled></el-input>
        </el-form-item>
      </el-col>
      <!-- 开始时间 -->
<!--      <el-form-item label="时间选择">-->
<!--        <el-date-picker-->
<!--          v-model="date"-->
<!--          type="daterange"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          value-format="yyyy-MM-dd" :disabled="isdisabled" @change="handleDate">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
            <el-col :span="6">
              <el-form-item label="开始时间">
                <el-date-picker
                  type="date"
                  @change="validateDates(1)"
                  placeholder="选择日期" v-model="info.start"
                  style="width: 100%;"
                  value-format="yyyy-MM-dd"
                  :disabled="isdisabled"
                  :picker-options="{ disabledDate: disabledStartDates }"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 结束时间 -->
            <el-col :span="6">
              <el-form-item label="结束时间">
                <el-date-picker type="date"
                  @change="validateDates(2)"
                  placeholder="选择日期" v-model="info.stop"
                  style="width: 100%;" value-format="yyyy-MM-dd"
                  :disabled="isdisabled"
                  :picker-options="{ disabledDate: disabledEndDates }"
                ></el-date-picker>
              </el-form-item>
            </el-col>
    </el-row>

    <slot name="test2"></slot>

    <!--客户报价,项目成本-->

    <el-row>
      <el-col :span="12">
        <el-form-item
          label="预算金额"
          v-if="info.hasOwnProperty('offer_ys')"
        >
          <el-input
            v-model="info.offer_ys"
            placeholder="预算金额"
            disabled
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预算成本" v-if="info.hasOwnProperty('cost_ys')">
          <el-input v-model="info.cost_ys" placeholder="预算成本" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item
          label="结算金额"
          v-if="info.hasOwnProperty('offer_js')"
        >
          <el-input
            v-model="info.offer_js"
            placeholder="结算金额"
            disabled
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结算成本" v-if="info.hasOwnProperty('cost_js')">
          <el-input v-model="info.cost_js" placeholder="结算成本" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>


    <el-form-item label="限额" v-if="info.hasOwnProperty('limit')">
      <el-input v-model="info.limit" placeholder="限额" disabled></el-input>
    </el-form-item>


  </el-form>

</template>

<script>
import {watch} from "vue";

export default {
  name: "baseInfo",
  props: ['info', 'isdisabled'],
  data() {
    return {
      date: [],
    }
  },
  methods: {
    validateDates(index) {
      if (this.info.start && this.info.stop && this.info.start > this.info.stop) {
        this.$message.error('开始时间不能大于结束时间');
        // 清除开始时间或者阻止表单提交，根据实际需求选择
        if (index === 1) {
          this.info.start = '';
        } else {
          this.info.stop = '';
        }
      }
    },

    disabledStartDates(time) {
      if (!this.info.created_at) {
        // 如果没有设定开始日期，则不限制任何日期
        return false;
      }
      const thirtyDaysLater = new Date(this.info.created_at).getTime(); // 在开始日期基础上增加30天
      // 返回true表示此日期不可选；否则可以继续选择
      return time.getTime() < thirtyDaysLater;

    },

    disabledEndDates(time) {
      if (!this.info.start) {
        // 如果没有设定开始日期，则不限制任何日期
        return false;
      }
      const thirtyDaysLater = new Date(this.info.start).getTime(); // 在开始日期基础上增加30天
      // 返回true表示此日期不可选；否则可以继续选择
      return time.getTime() < thirtyDaysLater;

    },

  }
}
</script>

<style scoped>

</style>
